<template>
  <div :style="defaultStyle" :class="isActiveClass">
    <template v-if="contentData.styleLayout === 1 || !contentData.styleLayout">
      <div class="exam-center-layout" :style="contentStyle">
        <div class="column left">
          <div
            class="icon-item"
            v-for="(item, index) in contentData.question_list.filter((_, i) => i % 2 === 0)"
            :key="'left-' + index"
            :style="titleItemStyle"
          >
            <img :src="item.img" alt="" class="icon" :style="imgStyle" />
            <div class="label" v-if="contentData.show_item_name">{{ item.name }}</div>
          </div>
        </div>

        <div class="center-buttons">
          <div
            class="center-button"
            :style="{ background: contentData.practiceCircle.bgColor || '#4caf50' }"
          >
            <div class="top">{{ contentData.practiceCircle.title }}</div>
            <div class="bottom">{{ contentData.practiceCircle.subTitle }}</div>
          </div>

          <div
            class="center-button"
            :style="{ background: contentData.examCircle.bgColor || '#4caf50' }"
          >
            <div class="top">{{ contentData.examCircle.title }}</div>
            <div class="bottom">{{ contentData.examCircle.subTitle }}</div>
          </div>
        </div>

        <div class="column right">
          <div
            class="icon-item"
            v-for="(item, index) in contentData.question_list.filter((_, i) => i % 2 === 1)"
            :key="'right-' + index"
            :style="titleItemStyle"
          >
            <img :src="item.img" alt="" class="icon" :style="imgStyle" />
            <div class="label" v-if="contentData.show_item_name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </template>

    <template v-if="contentData.styleLayout === 2">
      <div class="exam-center-layout2">
        <div class="left" :style="{ height: infoHeight + 'px' }">
          <div class="card" :style="leftBoxStyle">
            <img
              :src="contentData.itemStyle.styleLayout2.leftBg"
              @load="onImageLoad"
              style="display: none"
            />
            <div class="title">真实考场</div>
            <div>--分</div>
          </div>
        </div>
        <div class="right">
          <div class="right-item" :style="rightTopStyle">
            <div class="title">顺序练习</div>
            <div><span class="value-bold">26</span><span class="value-small">/1411</span></div>
          </div>
          <div class="right-item" :style="rightBottomStyle">
            <div class="title">模拟考试</div>
            <div><span class="value-bold">12</span><span class="value-small">分</span></div>
          </div>
        </div>
      </div>
    </template>

    <template v-if="contentData.styleLayout === 3">
      <div class="exam-center-layout3">
        <div class="info">
          <div class="left">
            <div class="title">顺序练习</div>
            <div><span class="num">26</span><span class="total">/1411</span></div>
          </div>
          <div class="right">
            <div class="title">模拟考试</div>
            <div><span class="num">12</span><span class="total">分</span></div>
          </div>
        </div>
        <div class="buttons">
          <div class="btn" :style="leftBtnStyle"> 开始练习 </div>
          <div class="btn" :style="rightBtnStyle"> 模拟考试 </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String
    }
  })

  const infoHeight = ref(0)

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      backgroundColor: s.backgroundColor,
      overflow: 'hidden'
    }
  })

  const imgStyle = computed(() => {
    const s = props.contentData.itemStyle
    return {
      borderRadius: s.borderRadius !== 100 ? s.borderRadius + 'px' : '50%',
      width: s.width ? s.width + 'px' : '36px',
      height: s.width ? s.width + 'px' : '36px'
    }
  })

  const titleItemStyle = computed(() => {
    const s = props.contentData.itemStyle
    return {
      ...s,
      fontSize: s.fontSize ? s.fontSize + 'px' : '14px',
      fontWeight: s.fontWeight ? (s.fontWeight === 0 ? 'normal' : s.fontWeight) : 'normal'
    }
  })

  const leftBoxStyle = computed(() => {
    const s = props.contentData.itemStyle.styleLayout2
    return {
      backgroundImage: `url(${s.leftBg})`,
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      color: s.leftFontColor
    }
  })

  const rightTopStyle = computed(() => {
    const s = props.contentData.itemStyle.styleLayout2
    return {
      backgroundImage: `url(${s.rightOneBg})`,
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      color: s.rightOneFontColor
    }
  })

  const rightBottomStyle = computed(() => {
    const s = props.contentData.itemStyle.styleLayout2
    return {
      backgroundImage: `url(${s.rightTwoBg})`,
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      color: s.rightTwoFontColor
    }
  })

  const leftBtnStyle = computed(() => {
    const s = props.contentData.itemStyle.styleLayout3
    return {
      backgroundColor: s.leftBtnBg,
      color: s.leftBtnFontColor
    }
  })

  const rightBtnStyle = computed(() => {
    const s = props.contentData.itemStyle.styleLayout3
    return {
      backgroundColor: s.rightBtnBg,
      color: s.rightBtnFontColor
    }
  })

  function onImageLoad(e) {
    const img = e.target
    const naturalWidth = img.naturalWidth
    const naturalHeight = img.naturalHeight

    const displayWidth = 175
    const scale = displayWidth / naturalWidth
    const scaledHeight = Math.round(naturalHeight * scale)

    infoHeight.value = scaledHeight
  }
</script>

<style scoped lang="scss">
  .exam-center-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 40px;
    min-height: 340px;

    .column {
      display: flex;
      flex-direction: column;
      height: 100%;
      gap: 16px;

      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        margin-bottom: 12px;

        .icon {
          margin-bottom: 4px;
        }
      }
    }

    .center-buttons {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px;

      .center-button {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 16px;

        &:first-child {
          margin-bottom: 50px;
        }

        .top {
          font-weight: bold;
          font-size: 16px;
          margin-bottom: 10px;
        }

        .bottom {
          font-size: 14px;
          opacity: 0.9;
        }
      }
    }
  }

  .exam-center-layout2 {
    display: flex;
    gap: 12px;

    .left {
      flex: 1;

      .card {
        padding: 16px;
        box-sizing: border-box;
        border-radius: 12px;
        height: 100%;

        .title {
          margin-bottom: 10px;
        }
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .right-item {
      flex: 1;
      border-radius: 12px;
      padding: 16px;

      .title {
        font-weight: bold;
        margin-bottom: 10px;
      }

      .value-bold {
        font-weight: bold;
        font-size: 16px;
      }

      .value-small {
        font-size: 12px;
        margin-left: 2px;
      }
    }
  }

  .exam-center-layout3 {
    padding: 24px;
    background: #fff;
    border-radius: 24px;
    //box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .info {
      display: flex;
      margin-bottom: 16px;
    }

    .left,
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .left {
      border-right: 1px solid #d4d2d5;
      margin-right: 26px;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
    }

    .num {
      font-size: 14px;
      font-weight: bold;
      color: #000;
      margin-right: 2px;
    }

    .total {
      font-size: 14px;
      color: #d7d7d9;
      font-weight: bold;
    }

    .buttons {
      display: flex;
      justify-content: space-between;
    }

    .btn {
      flex: 1;
      margin: 0 4px;
      padding: 14px 0;
      border-radius: 24px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      user-select: none;
    }
  }

  .active-component {
    border: 2px solid var(--el-color-primary);
  }
</style>
